<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .imgbox{width:350px;}
        .imgbox .m_box{width:350px;height:350px;position: relative;}
        .imgbox .m_box span{position:absolute;background:rgba(255,100,100,0.6);left:0;top:0;display:none;}
        .imgbox .m_box em{position: absolute;left:0;right:0;top:0;bottom:0;z-index: 1;}

        .bigImg{width:350px;height:350px;position: absolute;left:400px;top:8px;overflow: hidden;display:none;}
        .bigImg img{position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div class="imgbox">
        <div class="m_box">
            <img src="./imgs/m0.jpg" alt="">
            <span></span>
            <em></em>
        </div>
        <div class="s_box"></div>
    </div>
    <div class="bigImg">
        <img src="./imgs/l0.jpg" alt="">
    </div>
</body>
<script>

    // 分析：放大镜，等比例移动，计算比例

    // 获取元素
    // 完善布局（计算遮罩层的宽高）
    // 绑定事件
        // 进入：显示
        // 离开：隐藏
        // 移动：
            // 计算鼠标移动的距离，换算成left和top
            // 边界限定
            // 设置给遮罩层
            // 根据遮罩层实际移动的距离计算比例
            // 大图根据遮罩层移动的比例，计算大图应该移动的距离

    // 设计

    // class BigImg{
    //     constructor(){
    //         // 获取元素
    //         // 完善布局
    //         this.init()
    //         // 绑定事件
    //         this.addEvent()
    //     }
    //     init(){}
    //     addEvent(){
    //         // 进入:显示
    //             // this.show()
    //         // 离开:隐藏
    //             // this.hide()
    //         // 移动:移动
    //             // this.move()
    //     }
    //     show(){
    //         // 显示
    //     }
    //     hide(){
    //         // 隐藏
    //     }
    //     move(){
    //         // 计算鼠标移动的距离，换算成left和top
    //         // 边界限定
    //         // 设置给遮罩层
    //         // 计算遮罩层移动的比例
    //         // 计算右侧大图应该移动的距离
    //         // 设置给右侧大图
    //     }
    // }
    // new BigImg();


    // 编程
    class BigImg{
        constructor(){
            // 获取元素
            this.mBox = document.querySelector(".m_box");
            this.mImg = document.querySelector(".m_box img");
            this.bBox = document.querySelector(".bigImg");
            this.bImg = document.querySelector(".bigImg img");
            this.span = document.querySelector(".m_box span");

            // 为了方便，提前将容器的尺寸获取，保存到属性
            this.mBw = this.mBox.offsetWidth;
            this.mBh = this.mBox.offsetHeight;

            // 绑定事件
            this.addEvent()
        }
        init(){
            const that = this;
            // 因为js无法获取页面上默认隐藏的元素的样式
            // 需要在显示之后再获取
            // 为了方便，提前将容器的尺寸获取，保存到属性
            this.bBw = this.bBox.offsetWidth;
            this.bBh = this.bBox.offsetHeight;

            // 注意图片加载事件
            // this.bImg.onload = function(){
                // 为了方便，提前将图片的尺寸获取，保存到属性
                that.bIh = that.bImg.offsetHeight;
                that.bIw = that.bImg.offsetWidth;
                // 计算遮罩层的宽高：右侧显示区域 / 右侧图片尺寸 * 左侧容器尺寸
                that.span.style.width = that.bBw / that.bIw * that.mBw + "px";
                that.span.style.height = that.bBh / that.bIh * that.mBh + "px";
            // }
        }
        addEvent(){
            const that = this;
            // 进入:显示
            this.mBox.onmouseover = function(){
                that.show()
            }
            // 离开:隐藏
            this.mBox.onmouseout = function(){
                that.hide()
            }
            // 移动:移动
            this.mBox.onmousemove = function(eve){
                const e = eve || window.event;
                that.move(e)
            }
        }
        show(){
            // 显示
            this.span.style.display = "block";
            this.bBox.style.display = "block";
            // 遮罩层在初始时没有尺寸，计算
            // 计算之后，不需要重复设置
            if( !this.span.offsetWidth ){
                this.init();
            }
        }
        hide(){
            // 隐藏
            this.span.style.display = "none"
            this.bBox.style.display = "none"
        }
        move(e){
            // console.log(e.offsetX, e.offsetY)

            // 计算鼠标移动的距离，换算成遮罩层的left和top

            // 解决方式1：不使用offsetX/Y，使用pageX/Y经过计算得到真正需要的尺寸
            // let l = e.pageX - this.mBox.offsetLeft - this.span.offsetWidth/2;
            // let t = e.pageY - this.mBox.offsetTop - this.span.offsetHeight/2;

            // 解决方式2：使用添加一个布局容器挡在鼠标和遮罩层之间的方式
            let l = e.offsetX - this.span.offsetWidth/2;
            let t = e.offsetY - this.span.offsetWidth/2;

            // 边界限定
            if(l<0) l=0;
            if(t<0) t=0;
            if(l>this.mBw-this.span.offsetWidth) l=this.mBw-this.span.offsetWidth;
            if(t>this.mBh-this.span.offsetHeight) t=this.mBh-this.span.offsetHeight;

            // 设置给遮罩层
            this.span.style.left = l + "px";
            this.span.style.top = t + "px";

            // 计算遮罩层移动的比例
            // 根据比例计算右侧大图应该移动的距离
            // 设置给右侧大图
            this.bImg.style.left = -l / (this.mBw-this.span.offsetWidth) * (this.bIw-this.bBw) + "px";
            this.bImg.style.top = -t / (this.mBh-this.span.offsetHeight) * (this.bIh-this.bBh) + "px";
        }
    }
    new BigImg();


    // 比例的计算：参考第一周某个作业：玫瑰班和向日葵班...

</script>
</html>